<template>
  <div class="bg-white">
    <div class="container">
      <div class="clearfix usercenter">
        <div class="fl usercenter-left">
          <div class="usercenter-left-top">
            <img src="../../../static/images/img/lvcaijia.jpg" alt="">
            <p>xxxx</p>
            <ul class="usercenter-left-list">
              <li><router-link to="" class="usercenter-left-active">基本资料</router-link></li>
              <li><router-link to="">我的询价</router-link></li>
              <li><router-link to="Usercenter_store">收藏的商家</router-link></li>
              <li><router-link to="">收藏的产品</router-link></li>
              <li><router-link to="Myorder_waitpay">我的订单</router-link></li>
            </ul>
          </div>
        </div>
        <div class="fl">
          <div class="usercenter-right-form">
            <el-form ref="form" :model="form" class="person-form" label-width="80px"  v-show="isperson == true">
              <el-form-item label="手机号">
                <el-input v-model="form.mobile" disabled></el-input>
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="form.mobile"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.mobile"></el-input>
                <span class="send-email">发送验证邮件</span>
              </el-form-item>
              <el-form-item class="mgt-80">
                <el-button type="primary" class="person-form-btn">保存</el-button>
              </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" class="company-form" label-width="100px"  v-show="isperson == false">
              <el-form-item label="企业名">
                <el-input v-model="form.mobile" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form.mobile" disabled></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.mobile"></el-input>
                <!-- <span class="send-email">发送验证邮件</span> -->
              </el-form-item>
              <el-form-item prop="code" class="code" label="邮箱验证码">
                <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>
              <el-form-item label="企业性质">
                <el-select v-model="form.code" placeholder="请选择企业性质">
                  <el-option label="1" value="民营企业"></el-option>
                  <el-option label="2" value="国有企业"></el-option></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="企业性质">
                <el-input v-model="form.mobile"></el-input>
              </el-form-item> -->
              <el-form-item label="企业全称">
                <el-input v-model="form.mobile"></el-input>
                <span class="send-email">营业执照上的公司全称</span>
              </el-form-item>
              <el-form-item label="上传营业执照">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
              <el-form-item class="mgt-80">
                <el-button type="primary" class="person-form-btn">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  name:'Usercenter',
  data(){
      return{
        form:{
          mobile:'',
          code:''
        },
        isperson:false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        time: 0,
        btntxt: "重新发送",
      }
  },
  methods:{
    //手机验证发送验证码
            sendcode() {
                const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                if (this.form.mobile == '') {
                    this.$message({
                        message:'邮箱不能为空',
                        center: true
                    })
                    return
                }
                if (!reg.test(this.form.mobile)) {
                    this.$message({
                        message:'请输入正确的邮箱',
                        center:true
                    })
                    return
                } else {
                    console.log(this.form.mobile);
                    this.$message({
                        message: '发送成功',
                        type: 'success',
                        center:true
                    });
                    this.time = 60;
                    this.disabled = true;
                    this.timer();
                }
            },
            //60S倒计时
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt = this.time + "s后重新获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.btntxt = "获取验证码";
                    this.disabled = false;
                }
            },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
  },
  created:function () {
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  },
}
</script>

<style>
 @import '../../../static/style/usercenter';
</style>
